<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0 auto;
            width: 1000px;

        }
        ul li{
           
            width: 500px;
            height: 500px;
            list-style: none;
            
            float: left;
        }
        ul li:nth-child(1){
            width: 400px;
            margin-right: 100px;
        }
        li img{
            width: 100%;
        }
        .div2{
            background-color: #FFF2E8;
            height: 50px;
            margin: 20px 0;
        }
        .div2 div:nth-child(1)
        {
            float: left;
        line-height: 50px;
        }
        .div2 div:nth-child(2)
        {
            float: right;
            text-align: center;
        }
        .div2 span:nth-child(2){
            margin-left: 30px;
            color: red;
        }
        .div2 div:nth-child(2) div:nth-child(1)
        {
          margin-right: 10px;
          border-right: 1px solid #ccc;
          line-height: 20px;
        }
        .div3 span{
            padding:10px;
            border: 1px solid #ccc;
        }
        .div3 p{
            margin-right: 50px;
            display: inline-block;
        }
        .div4{
            margin: 50px 0 30px 0;
        }
        .div4 span{
            margin-right: 50px;
        }
        .div4 img{
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
        }
        .div5{
            height: 40px;
        }
        .div5 p{

            margin-right: 50px;
            line-height: 40px ;
            float: left;
        }
        .div5 div{
           float: left;

        }
        .div5 div input{
            width: 30px;
            height: 30px;
            border: none;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            text-align: center;
            float: left;

        }
        .div5 div a{
            float: left;
            display: block;
            width: 20px;
            height: 30px;
            border: none;
            border: 1px solid #ccc;
          
            text-align: center;
            line-height: 30px;
           

        }
        .div6{
            margin-top: 50px;
        }
        .div6 a:nth-child(1){
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: #FFF2E8;
            border: 1px solid #ccc;
            text-align: center;
            text-decoration:none;
            color: red;
            margin-right: 50px;
        }
        .div6 a:nth-child(2){
            display: inline-block;
            width: 150px;
            height: 30px;
            color: #fff;
            background-color: red;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
            text-decoration:none;
        }
    </style>
</head>
<body>
    <section>
    <ul id="box">
        <!-- <section >
        <li><img src="./images/1.jpg" alt=""></li>
        <li>
            <div class="div1">女装真丝连衣裙</div>
            <div class="div2">
                <div>
                    <span>价格</span>
                    <span>￥79</span>
                </div>
                <div>
                    <div>
                        <p>5</p>
                        <p>累计评论</p>
                    </div>
                    <div>
                        <p>-</p>
                        <p>交易成功</p>
                    </div>
                </div>
            </div>
            <div class="div3">
                <p>尺码</p>
                <span>xs</span>
                <span>s</span>
                <span>m</span>
                <span>L</span>
            </div>
            <div class="div4">
                <span>颜色分类</span>
                <img src="./images/1.jpg" alt="">
                <img src="./images/1.jpg" alt="">
            </div>
            <div class="div5">
                <p>数量</p>
                <div>
                    <a>+</a>
                    <input type="text" value="1">
                    <a>-</a>
                </div>
            </div>
            <div class="div6">
                <a href="">立即购买</a>
                <a href="">加入购物车</a>
            </div>
        </li>
    </section> -->
    </ul>
</section>














<script>
    var goodlist = [
       { id: 1, url: './images/1.jpg', name: '乐淘淘cc', price: 78.00, list: "女装真丝连衣裙" },
       { id: 2, url: './images/2.jpg', name: '江米天猫', price: 228.00, list: "sp同款小白裙" },
       { id: 3, url: './images/3.jpg', name: '绣娘旗舰店', price: 1254.40, list: "绣娘新装仙气小裙" },
       { id: 4, url: './images/4.jpg', name: '家有n多宝贝', price: 169.00, list: "绒被清凉小婵" },
       { id: 5, url: './images/5.jpg', name: '音儿官方旗舰店', price: 1488.00, list: "2020夏季新款小菊图" }
   ]

   var s=location.search
  
   s=s.substring(1)
   s=s.split("=")
   obj={}
   obj[s[0]]=s[1]
   console.log(obj)

   var res = goodlist.filter(function (item, index) {
       return item.id == obj.id
   })
   console.log(res)
   for(var key in res){
             box.innerHTML+=`
             <section >
        <li><img src=${res[key].url} alt=""></li>
        <li>
            <div class="div1">${res[key].list}</div>
            <div class="div2">
                <div>
                    <span>价格</span>
                    <span>￥${res[key].price}</span>
                </div>
                <div>
                    <div>
                        <p>5</p>
                        <p>累计评论</p>
                    </div>
                    <div>
                        <p>-</p>
                        <p>交易成功</p>
                    </div>
                </div>
            </div>
            <div class="div3">
                <p>尺码</p>
                <span>xs</span>
                <span>s</span>
                <span>m</span>
                <span>L</span>
            </div>
            <div class="div4">
                <span>颜色分类</span>
                <img src=${res[key].url} alt="">
                <img src=${res[key].url} alt="">
            </div>
            <div class="div5">
                <p>数量</p>
                <div>
                    <a>+</a>
                    <input type="text" value="1">
                    <a>-</a>
                </div>
            </div>
            <div class="div6">
                <a href="">立即购买</a>
                <a href="">加入购物车</a>
            </div>
        </li>
    </section>
      `
 }
   

</script>











    <!-- <script>
         var goodlist = [
            { id: 1, url: './images/1.jpg', name: '乐淘淘cc', price: 78.00, list: "女装真丝连衣裙" },
            { id: 2, url: './images/2.jpg', name: '江米天猫', price: 228.00, list: "sp同款小白裙" },
            { id: 3, url: './images/3.jpg', name: '绣娘旗舰店', price: 1254.40, list: "绣娘新装仙气小裙" },
            { id: 4, url: './images/4.jpg', name: '家有n多宝贝', price: 169.00, list: "绒被清凉小婵" },
            { id: 5, url: './images/5.jpg', name: '音儿官方旗舰店', price: 1488.00, list: "2020夏季新款小菊图" }
        ]

        var s=location.search
       
        s=s.substring(1)
        s=s.split("=")
        obj={}
        obj[s[0]]=s[1]
        console.log(obj)

        var res = goodlist.filter(function (item, index) {
            return item.id == obj.id
        })
        console.log(res)
        for(var key in res){
                  box.innerHTML+=`
            <li class="goods1" idx=${key.id}>
            <img src=${res[key].url}>
            <p>姓名：${res[key].name}</p>
            <p>价格：${res[key].price}</p>
            <p>年龄：${res[key].list}</p>
        </li>`
      }
        
     
    </script> -->



</body>
</html>